<template>
  <NModal
    v-model:show="show"
    :segmented="{ content: true, action: true }"
    :auto-focus="false"
    style="--n-padding-bottom: 12px; --n-action-color: var(--n-color-modal)"
    v-bind="props"
    :draggable="isFullscreen ? false : props.draggable"
    :content-class="mergeClass('nv-crud__modal-card-content', props.contentClass)"
    :style="cardStyle"
    preset="card"
    display-directive="if"
  >
    <template #header-extra>
      <button
        v-if="fullscreenEnabled"
        class="n-base-close n-base-close--absolute n-card-header__close"
        @click="toggleFullscreen"
      >
        <NIcon size="18">
          <FullScreenMinimize24Filled v-if="isFullscreen" />
          <FullScreenMaximize24Filled v-else />
        </NIcon>
      </button>
    </template>

    <slot />

    <template #action>
      <div :id="props.actionId" />
    </template>
  </NModal>
</template>

<script setup lang="ts">
import type { NvModalProps } from './types'
import { FullScreenMaximize24Filled, FullScreenMinimize24Filled } from '@vicons/fluent'
import { NIcon, NModal } from 'naive-ui'
import { computed, ref } from 'vue'
import { mergeClass } from '@/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NvModalProps>(), {
  maskClosable: true,
  fullscreenEnabled: true,
})
const show = defineModel<boolean>('show', { required: true })

const isFullscreen = ref(false)
function toggleFullscreen() {
  isFullscreen.value = !isFullscreen.value
}

const cardStyle = computed(() => {
  if (isFullscreen.value) {
    return { left: '0', top: '0', width: '100vw', height: '100vh' }
  }
  else {
    return {
      width: typeof props.width === 'number' ? `${props.width}px` : props.width,
      height: typeof props.height === 'number' ? `${props.height}px` : props.height,
      maxWidth: '100vw',
      maxHeight: '100vh',
    }
  }
})
</script>

<style lang="scss">
.nv-crud__modal-card-content {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
